import React from 'react'
import ReactDOM from 'react-dom'

/**
 * 全屏组件，可以设定打开和关闭的动画
 * 悬浮类的控件都可以以这个形式为模版
 * 比如Popover、Tooltip、Modal等
 */
class FullScreen extends React.Component{
  constructor(props) {
    super(props);
    this.container = null;
  }

  componentDidMount() {
    const { hasMask } = this.props;
    this.container = document.createElement('div');
    if(hasMask)
      this.container.className = 'full-screen-mask';
    document.body.append(this.container);
    this.renderChildren(this.props)
  }

  componentWillUnmount() {
    const { animateIn, animateOut } = this.props;
    let content = this.container.children[0];
    content.className = content.className.replace(animateIn, animateOut);
    setTimeout(() => {
      //退出时一定要删除容器，不然会越来越多
      ReactDOM.unmountComponentAtNode(this.container);
      document.body.removeChild(this.container);
    }, 300);
  }

  componentWillReceiveProps(nextProps) {
    //每次都重新渲染并不会影响效率
    //内部也遵循React的diff算法
    this.renderChildren(nextProps)
  }

  renderChildren = props => {
    const { className, children, style, animateIn } = props;
    let assignedStyle = Object.assign({
      position: 'fixed',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      zIndex: 999,
      animationDuration: '.3s',
    }, style);
    //这里使用unstable_renderSubtreeIntoContainer没有直接使用render的原因是
    //render只是渲染dom，而这个方法同时还指定了parentComponent，可以将上下文环境同时带入
    //所以本来不属于body层面的store就可以用了
    //这个东西在React16里就是React.createPortal，省略了第一个参数直接就是this
    //所以如果想造轮子，判断是否是React16，如果是，render直接返回portal，否则render返回null，在这里装载
    ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      <div
        className={`full-screen ${window.ISIE9 ? '' : ('animated ' + animateIn)} ${className}`}
        style={assignedStyle}
      >
        {children}
      </div>,
      this.container
    );
  };

  render() {
    return null;
  }

}

FullScreen.propTypes = {
  className: React.PropTypes.string,
  style: React.PropTypes.object,
  animateIn: React.PropTypes.string,
  animateOut: React.PropTypes.string,
  hasMask: React.PropTypes.bool
};

FullScreen.defaultProps = {
  className : '',
  style: {},
  animateIn: 'zoomInDown',
  animateOut: 'zoomOutDown',
  hasMask: true
};

export default FullScreen
